<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 用来存储图片数据
const images = ref([]);

// 获取接口中的最后三张图片数据
const fetchImages = async () => {
  try {
    const response = await axios.get('http://localhost:8085/CameraData/setLastThreePhotos');
    if (response.data && Array.isArray(response.data)) {
      // 假设接口返回的数据是一个数组，包含图片的 URL
      images.value = response.data;
    }
  } catch (error) {
    console.error('获取图片失败:', error);
  }
};

// 在组件挂载时调用
onMounted(() => {
  fetchImages();
});
</script>

<template>
  <dv-border-box11 title="四号大棚数据可视化大屏" :title-width="450" :animate="true">
    <div style="margin-top: 60px;margin-left: 20px">
      <div class="block text-center">
        <el-carousel style="height: 165px; width: 565px" v-if="images.length">
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <img :src="image" style="border-radius: 8px;height: 165px; width: 565px">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </dv-border-box11>
</template>

<style scoped>
</style>